<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>行情</title>
    <link rel="stylesheet" type="text/css" href="../style/api.css" />
    <link rel="stylesheet" type="text/css" href="../style/head.css" />
    <link rel="stylesheet" type="text/css" href="../style/animate.min.css" />
    <style>
        main {
            padding-top: 75px;
        }

        #pullrefresh {
            padding-top: 75px;
        }
        .tableT {
            color: #345;
            padding: 0.5rem;
            display: flex;
            justify-content: space-between;
            background-color: #fff;
            border-top: 1px solid #ccc;
        }
        .bitContent {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem;
            width: 95%;
            margin: 0.5rem auto;
            background-color: #fff;
        }

        .bitname {
            margin-bottom: 0.3rem;
        }

        .bitname span:nth-child(1) {
            font-weight: bold;
            color: #212832;
            font-size: 1.2rem;
        }

        .bitname span:nth-child(2) {
            color: #ABC6F7;
            border: 1px solid #ABC6F7;
            font-size: 0.8rem;
        }

        .bitname span:nth-child(3) {
            font-size: 0.8rem;
        }

        .bitcount {
            font-size: 0.8rem;
            color: #666;
        }

        .bitContent-price {
            text-align: center;
        }

        .bitContent-price div:nth-child(2) {
            margin-top: 0.3rem;
            font-size: 0.8rem;
            color: #666;
        }

        .bitContent-Increase {
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 20%;
            color: #fff;
            border-radius: 0.5rem;
        }
        .upColor {
            color: #00c087;
        }

        .zeroColor {
            color: #5A92FF;
        }

        .downColor {
            color: #ff7858;
        }

        .upBg {
            background-color: #00c087;
        }

        .zeroBg {
            background-color: #5A92FF;
        }

        .downBg {
            background-color: #ff7858;
        }

        .buy {
            color: #00c087;
            border: 1px solid #00c087;
        }

        .stop {
            color: #5a92ff;
            border: 1px solid #5A92FF;
        }

        .sell {
            color: #ff7858;
            border: 1px solid #ff7858;
        }

    </style>
</head>

<body>
    <header>行情</header>
    <main>
      <div class="tableT">
          <span>币种</span>
          <span>24小时交易量</span>
          <span>价格</span>
          <span>涨跌率</span>
      </div>
    </main>
</body>
<script type="text/template" id="coinList">
    {{~it.items:value:index}}
    <div class="bitContent animated bounceInLeft" data-id="{{=value.id}}">
        <div class="bitContent-info">
            <div class="bitname">
                <span>{{=value.coin_name}}/USDT</span>
                <span>USDT</span>{{? value.coin_label == '买'}}
                <span class="buy">{{=value.coin_label}}</span>
                {{?? value.coin_label == '卖'}}
                <span class="sell">{{=value.coin_label}}</span>
                {{?? value.coin_label == '停'}}
                <span class="stop">{{=value.coin_label}}</span>
                {{?}}
            </div>
            <div class="bitcount">24小时 交易量 {{=value.coin_turnover}}USDT</div>
        </div>
        <div class="bitContent-price">
            {{? value.coin_upordown.charAt(0) == '+' && value.coin_upordown != '+0.0%'}}
            <div class="upColor">{{=value.coin_currentmarket}}</div>
            <div>￥{{=value.coin_price}}</div>
            {{?? value.coin_upordown.charAt(0) == '-'}}
            <div class="downColor">{{=value.coin_currentmarket}}</div>
            <div>￥{{=value.coin_price}}</div>
            {{?? value.coin_upordown == '+0.0%'}}
            <div class="zeroColor">{{=value.coin_currentmarket}}</div>
            <div>￥{{=value.coin_price}}</div>
            {{?}}
        </div>
        {{? value.coin_upordown.charAt(0) == '+' && value.coin_upordown != '+0.0%'}}
        <div class="bitContent-Increase upBg">{{=value.coin_upordown}}</div>
        {{?? value.coin_upordown.charAt(0) == '-'}}
        <div class="bitContent-Increase downBg">{{=value.coin_upordown}}</div>
        {{?? value.coin_upordown == '+0.0%'}}
        <div class="bitContent-Increase zeroBg">{{=value.coin_upordown}}</div>
        {{?}}
    </div>
    {{~}}
</script>
<script type="text/javascript" src="../js/api.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/doT.min.js"></script>
<script type="text/javascript" src="../js/rend.js"></script>
<script type="text/javascript">
    apiready = function() {
        getCoin();
    };

    function getCoin() {
        api.ajax({
            url: 'http://114.116.243.15/newbtb/appinfo/queryCoin.lecture',
            method: 'post',
            data: {
                body: {}
            }
        },function(ret, err){
            if (ret) {
                if(ret.btb_data.total > 0) {
                    $('main').append(btbRender('coinList',ret.btb_data.records));
                    $('.bitContent').click(function() {
                        api.openWin({
                            name: 'coindetail',
                            url: './btb-coindetail.html',
                            pageParam: {
                                id: $(this).attr('data-id')
                            }
                        });
                    })
                }
            }
        });
    }

</script>

</html>
